<template>
    <div class="aa">
      <div class="usermanage">
        <div class="msg">职位管理</div>
        <div class="usermanagebutton">
            <el-button-group class="ml-4">
            <el-button type="primary" :icon="Edit" />
            <el-button type="primary" :icon="Delete" @click="open" />
            </el-button-group>
            <el-button-group class="btn-left">
              <el-button type="primary">显示 | 隐藏</el-button>
              <el-button type="primary">复制</el-button>
              <el-button type="primary">导出</el-button>
            </el-button-group>
        </div>
        <div class="table_top">
          <el-input v-model="input2" class="input_" placeholder="Please Input" :prefix-icon="Search"/>
        </div>
      
      <div class="table_bottom">
        <el-pagination
        v-model:current-page="currentPage3"
        v-model:page-size="pageSize3"
        background
        layout="total,prev, pager, next, jumper"
  
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="height: 49px;margin-left: 450px;"
      />
      </div>
      </div>
    </div>
  </template>
    
  <script setup>
  import { onMounted,ref } from 'vue'
  import {Delete,Edit,Search } from '@element-plus/icons-vue'
  // import { ElMessage, ElMessageBox } from 'element-plus'
  
  const open = () => {
    ElMessageBox.confirm(
      'proxy will permanently delete the file. Continue?',
      'Warning',
      {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
      }
    )
      .then(() => {
        ElMessage({
          type: 'success',
          message: 'Delete completed',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: 'Delete canceled',
        })
      })
  }
  </script>
  
  <style>
  .aa{
    position: absolute;
    width: 84%;
  }
  .usermanage{
    position: relative;
    height: 520px;
    width: 100%;
  
  }
   .msg{
    position: relative;
    font-size: 20px;
    margin-top: 25px;
    border-bottom:1px solid #dec4c4;
  }
  .table_top{
    position: relative;
    height:50px;
    width: 100%;
    background-color: rgb(219, 222, 222);
    float: left;
    margin-top: 6px;
  }
  .table_top .input_{
    width:15%;
    float: right;
    display: flex; 
    padding-top: 10px;
    margin-right: 22px;
  }
  .table_bottom{
    position: relative;
    height:50px;
    width: 100%;
    background-color: rgb(200, 210, 210);
    float: left;
  }
  .ml-4{
    position:relative;
    float: left;
    padding-top:8px;
  }
  .btn-left{
    position:relative;
    padding-top:8px;
   float: right;
  }
  
  </style>